<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, Zoom, Scale, PointLayer, Layers} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addControlWithGaode",
    components: {L7MapWithGaode},
    setup() {
        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(15.056, [121.4316962, 31.26082325])

            fetch(`${window.location.origin}/antv-test/data/893d1d5f-11d9-45f3-8322-ee9140d288ae.json`)
                .then(res => res.json())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'longitude',
                                y: 'latitude'
                            }
                        })
                        .shape('circle')
                        .size('unit_price', [5, 25])
                        .color('name', ['#49B5AD', '#5B8FF9'])
                        .style({
                            opacity: 0.3,
                            strokeWidth: 1
                        });

                    scene.addLayer(pointLayer);
                    const overlayers = {
                        气泡图: pointLayer
                    };
                    const layersControl = new Layers({
                        overlayers,
                        position: 'rightcenter'
                    });

                    scene.addControl(layersControl);
                });

            const zoomControl = new Zoom({
                position: 'rightcenter'
            });

            const scaleControl = new Scale({
                position: 'bottomright'
            });
            scene.addControl(zoomControl);
            scene.addControl(scaleControl);
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
